/*
 * @Author: your name
 * @Date: 2021-11-11 11:22:20
 * @LastEditTime: 2021-11-15 16:03:03
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \flutter_redux\redux_example\lib\main.dart
 */
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
import 'package:redux/redux.dart';
import 'package:redux_example/store/actions.dart';
import 'package:redux_example/store/reduces.dart';
import 'package:redux_example/store/state.dart';
import 'package:redux_example/widgets/add.dart';
import 'package:redux_example/widgets/count_view.dart';
import 'package:redux_example/widgets/lists_item_view.dart';
import 'package:redux_example/widgets/view_model.dart';
// 1.删除无用的文件,删除注释

// 4.添加按钮 -> dispatch -> action -> reducer -> 更新state

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // 2.创建store -> state
  final store = Store(appStateReducer, initialState: AppState());
  MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    // 3.使用StoreProvider
    return StoreProvider<AppState>(
      store: store,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          // This is the theme of your application.
          // Try running your application with "flutter run". You'll see the
          // application has a blue toolbar. Then, without quitting the app, try
          // changing the primarySwatch below to Colors.green and then invoke
          // "hot reload" (press "r" in the console where you ran "flutter run",
          // or simply save your changes to "hot reload" in a Flutter IDE).
          // Notice that the counter didn't reset back to zero; the application
          // is not restarted.
          primarySwatch: Colors.blue,
        ),
        home: const MyHome(),
      ),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, ViewModel>(
      builder: (context, viewModel) => Scaffold(
        appBar: AppBar(),
        body: SizedBox(
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              const Text('计数器的状态：'),
              // builder -> 最终返回的widget
              // StoreConnector -> 初始的state类型，最终输出到builder的类型
              // converter -> 取用最近的Provider -> store -> 转化成我们需要的类型数据
              // builder -> 返回一个Widget -> 使用state -> viewModel
              CountView(viewModel),
              Add(viewModel),
              Expanded(
                child: ListsItemView(viewModel),
              ),
              ElevatedButton(
                onPressed: () {
                  viewModel.clearItems();
                },
                child: const Text('删除所有的Item'),
              ),
            ],
          ),
        ),
        // 1.需要添加一个按钮 -> onPress -> new Action
        // 2.需要添加action -> decrement
        // 3.需要配置reducer -> dispatch -> new state
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: () {
                // 触发dispatch方法 -> action -> actions.increment
                viewModel.onIncrement();
              },
            ),
            const Padding(
              padding: EdgeInsets.only(top: 10.0),
            ),
            FloatingActionButton(
              child: const Icon(Icons.remove),
              onPressed: () {
                // 触发dispatch方法 -> action -> actions.increment
                viewModel.onDecrement();
              },
            ),
          ],
        ),
      ),
      converter: (store) => ViewModel.create(store),
    );
  }
}
